<template>
	<div class="topbar">
		<div class="location">
			<van-icon name="location" color="#81838e"/>
			<span>{{city || "定位中..."}}</span>
		</div>
		<div class="searvh" @click="$router.push({name:'search'})">
			<div>
				<van-icon name="search" color="#afafaf"/>
				<span>请输入搜索内容</span>
			</div>
		</div>
		<!-- 选择省市区 -->
		<!-- <div class="area">
			<van-area title="标题" :province_list="areaList" />
		</div> -->
	</div>
</template>

<script>
	export default {
		name:'topbar',
		data(){
			return{
				city:'',
				getLocations:''
			}
		},
		created(){
			this.getLocations = new qq.maps.Geolocation("K3PBZ-OESCD-XGL42-PA3SH-O3MTK-3VBZO", "lichenyang")
			this.getLocations.getLocation(this.sucCallback, this.errCallback)
		},
		methods:{
			sucCallback(aaa){
				// console.log(aaa)
				this.city = aaa.city
			},
			errCallback(){
				this.getLocations.getIpLocation(this.sucCallback, this.errCallback)
			}
		}
	}
</script>

<style scoped lang="less">
	*{
		padding: 0;
		margin: 0;
	}
	.topbar{
		width: 375px;
		height: 40px;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 5px 0 5px 0;
		.area{
			position: absolute;
			background-color: red;
			width: 100%;
		}
		.location{
			width: 80px;
			height: 18px;
			display: flex;
			align-items: center;
			font-size: 14px;
			padding-left: 10px;
			span{
				padding-left: 5px;
			}
		}
		.searvh{
			width: 280px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			div{
				width: 280px;
				height: 30px;
				border-radius: 15px;
				background-color: #f2f2f2;
				display: flex;
				justify-content: center;
				align-items: center;
				color:#afafaf;
				span{
					margin-left: 5px;
				}
			}
		}
	}
</style>
